<template>
  <div class="container">
    <div class="app-container">
      <!-- 展示树形结构 -->
      <el-tree :data="treeDepData" :props="defaultProps" default-expand-all>
        <template v-slot="{ data }">
          <el-row style="width: 100%; height: 40px" type="flex" justify="space-between" align="middle">
            <el-col :span="20">
              <span>{{ data.name }}</span>
            </el-col>
            <el-col :span="4">
              <el-row class="right-row" type="flex">
                <span style="margin-right: 10px; width: 50px; display: inline-block">{{ data.managerName }} </span>
                <el-dropdown @command="handleCommand($event, data.id)">
                  <span class="el-dropdown-link">
                    操作
                    <el-icon class="el-icon--right">
                      <arrow-down />
                    </el-icon>
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item command="add">添加子部门</el-dropdown-item>
                      <el-dropdown-item command="edit">编辑部门</el-dropdown-item>
                      <el-dropdown-item command="del">删除部门</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </el-row>
            </el-col>
          </el-row>
        </template>
      </el-tree>
    </div>
    <!-- 部门弹窗 -->
    <addDeptDialog ref="DepRef" :currentDeptId="currentDeptId" @updateDepartmentList="getDepartmentList"></addDeptDialog>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted, nextTick } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { getDepartmentListApi, delDepartmentApi } from "@/api/department";
import { tranListToTreeData } from "@/utils/index";
import addDeptDialog from "./components/add-DeptDialog.vue";

// 定义树形结构部门列表数据
const treeDepData = ref([]);
const currentDeptId = ref(null); //记录当前部门id
//d 获取子组件实例
const DepRef = ref<InstanceType<typeof addDeptDialog>>();
//控制对话框的显示与隐藏
const visible = ref(false);

// 生命周期钩子，组件挂载完成后获取部门列表数据并转换为树形结构数据
onMounted(() => {
  getDepartmentList();
});
// 获取部门列表数据并转换为树形结构数据的函数
const getDepartmentList = async () => {
  // 获取部门列表数据，并转换为树形结构数据
  //  tranListToTreeData('需要转化的数据',根节点id 0 / '')
  const res = tranListToTreeData(await getDepartmentListApi(), 0);
  treeDepData.value = res;
};

// 定义处理下拉菜单命令的方法，根据不同的操作类型执行相应逻辑
const handleCommand = (type: string, id) => {
  if (type === "add") {
    DepRef.value.visible = true; // 打开添加部门对话框
    currentDeptId.value = id; // 记录当前操作部门的ID
  } else if (type === "edit") {
    DepRef.value.visible = true; // 打开编辑部门对话框
    currentDeptId.value = id; // 记录当前操作部门的ID
    // 确保组件已经渲染完成后再获取数据
    nextTick(() => {
      DepRef.value.getDepartmentDetail(currentDeptId.value); // 获取当前操作部门的详细信息,并填充到表单中
    });
  } else {
    ElMessageBox.confirm("确定要删除该部门吗?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        delDepartmentApi(id).then((res) => {
          getDepartmentList(); // 重新获取部门列表数据并更新树形结构数据
        });
        ElMessage({
          type: "success",
          message: "删除成功！",
        });
      })
      .catch(() => {
        ElMessage({
          type: "info",
          message: "已取消删除！",
        });
      });
  }
};
// 定义树形结构属性配置对象
const defaultProps = {
  children: "children",
  label: "name",
};
</script>
<style>
.container {
  padding: 20px;
}
.right-row {
  display: flex;
  justify-content: space-between;
}
</style>
